<template>
<div class="home-1">
     <div>
         <el-button type="primary" class="home1btn" @click="btnadd">{{isshow? '取消':'添加用户'}}</el-button>
          <el-button type="danger" class="home1btn" @click="deletebtn">删除</el-button>
 <!-- 添加用户组件 -->
         <div class="from" v-if="isshow">
         <span style="color:red; font-size: 10px ;">注意：必须填写全部数据</span>
        <el-form :model="adduser" status-icon ref="chong" label-width="100px" class="demo-ruleForm">
 <el-form-item label="用户名"  required="true" :rules="{ required: true, message: '请输入活动名称', trigger: 'blur' }">
      <el-input  v-model="adduser.username" placeholder="请输入用户名（手机号）"></el-input>
</el-form-item>
 <el-form-item label="密码"  required="true">
           <el-input type="password" v-model="adduser.password" placeholder='请输入密码' show-password></el-input>
           </el-form-item>
            <el-form-item label="真实姓名"  required="true">
                <el-input  v-model="adduser.realName" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="地址"  required="true">
                <el-input  v-model="adduser.addr" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="生日"  required="true">
                <div class="block">
    <el-date-picker
      v-model="adduser.birthday"
      type="datetime"
      placeholder="选择日期时间"
      align="right"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
   </el-form-item>
            <el-form-item label="性别"  required="true">
                <el-radio v-model="adduser.gender" label="男">男</el-radio>
               <el-radio v-model="adduser.gender" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="用户级别"  required="true">
                <el-input  v-model="adduser.level" placeholder="0-学生，1-在校教师，2-外聘教师，9-管理员"></el-input>
                <span style="color:red;  font-size:10px; ">提示：用户级别为，0-学生，1-在校教师，2-外聘教师，9-管理员</span>
            </el-form-item>
            <el-form-item label="昵称"  required="true">
                <el-input  v-model="adduser.nickName" placeholder="请输入昵称"></el-input>
            </el-form-item>
           
      
  <el-button type="primary" class="xgbtn " @click="addbtn('chong')">添加</el-button>
</el-form>
 
         </div>
     </div>
<!-- 修改信息 -->
         <div class="from" v-if="isxg">
        <el-form :model="xguser" status-icon ref="chong" label-width="100px" class="demo-ruleForm">
         <el-form-item label="用户名">
                <el-input  v-model="xguser.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
             <el-form-item label="密码" >
           <el-input type="password" v-model="xguser.password" placeholder='请输入密码' show-password></el-input>
           </el-form-item>
            <el-form-item label="真实姓名">
                <el-input  v-model="xguser.realName" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input  v-model="xguser.addr" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="生日">
                <div class="block">
    <el-date-picker
      v-model="xguser.birthday"
      type="datetime"
      placeholder="选择日期时间"
      align="right"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="xguser.gender" label="男">男</el-radio>
               <el-radio v-model="xguser.gender" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="用户级别">
                <el-input  v-model="xguser.level" placeholder="0-学生，1-在校教师，2-外聘教师，大于3-管理员"></el-input>
                  <span style="color:red;  font-size:10px; ">提示：用户级别为，0-学生，1-在校教师，2-外聘教师，9-管理员</span>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input  v-model="xguser.nickName" placeholder="请输入昵称"></el-input>
            </el-form-item>
           
           
  <el-button type="primary" class="xgbtn" @click="xgbtn">确定</el-button>
</el-form>
 
         </div>
    <!-- 列表组件 -->
  <el-table class="eltab"
   @selection-change="handleSelectionChange"
    :data="users"
    style="width: 100%">
      <el-table-column
      type="selection"
      width="50">
    </el-table-column>
    <el-table-column label="用户id"  width="70"  height='35px'>
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.uid }}</span>
      </template>
    </el-table-column>
     <el-table-column label="用户账号"  width="150"  height='35px'>
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.username }}</span>
      </template>
    </el-table-column>
    <el-table-column label="性别" width="50">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.gender }}</span>
      </template>
    </el-table-column>
   <el-table-column label="地址" width="280">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.addr }}</span>
      </template>
    </el-table-column>
 <el-table-column label="生日" width="160">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.birthday }}</span>
      </template>
    </el-table-column>
 <el-table-column label="真实姓名" width="80">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.realName }}</span>
      </template>
    </el-table-column>
 <el-table-column label="密码" width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.password }}</span>
      </template>
    </el-table-column>
 
<!-- 操作模块 -->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- 分页组件 -->
 <el-pagination
  background
   @current-change="handleCurrentChange"
   :current-page="page"
    :page-size='limit'
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
<!-- 添加信息弹出层 -->
<!-- <tanchu v-if="isshow"></tanchu> -->
</div>
</template>

<script>
import {http} from '../../../../uitl/request'
//import tanchu from './home-1-2.vue'
export default {
    created(){
        this.getusers()
    },
    data(){
        return{
page:1,
limit:15,//一页有多少条数据
users:[],
isshow:false,
adduser:{addr:'',birthday:'',gender:'男',level:1,nickName:'',password:'',realName:'',username:''},
shu:[],
isxg:false,
xguser:{addr:'',birthday:'',gender:'男',level:1,nickName:'',password:'',realName:'',username:''}
        }
    },
    methods:{
      dateFormat(data){
        let date = new Date(data);
        let YY = date.getFullYear() + '-';
        let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + " ";
        let HH = date.getHours() + ":";
        let mf = date.getMinutes() + ":";
        let ss = date.getSeconds();
        // console.log(YY + MM + DD + HH + mf + ss)
        return YY + MM + DD + HH + mf + ss;
      },
      btnadd(){
        const userinfo=this.$store.state.userinfo
        if(userinfo.level>3){
          this.isshow=!this.isshow
        }else{
          this.isshow=false
           this.$message.error('权限不足')
        }
      },
         //当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
       //  console.log(`当前页: ${val}`);
         this.page = val;
         this.getusers()
        // console.log(this.page);
     },
    async getusers(){
    
try{
    const {data:res}=await http.post(`/user/list/${this.page}/${this.limit}`)
    
    if(res.data !== undefined && res.data.length!==0 ){
        this.users=res.data.records
    }else {
      this.$message.error(res.msg)
    }
   // console.log(this.users);
}catch(err){
    Promise.reject(err)
}
     },
    async addbtn(){//添加用户
        try {
            this.adduser.birthday = this.dateFormat(this.adduser.birthday)
            const {data:res}=await http.post('/user/save',this.adduser)
            if(!res.data) {
              this.$message.error('请填写完整表单')
             //this.$message.error('用户权限不足')
              return
            }
           this.$message({
               type:'success',
               message:res.data
           })
this.adduser={ addr:'',birthday:'',gender:'男',level:1,nickName:'',password:'',realName:'',username:''}
this.isshow=false
        } catch (err) {
            Promise.reject(err)
        }
//console.log(this.adduser);
     },
    //  获取选择到的数据
        handleSelectionChange(val) {
        this.shu = val;//赋值一个对象到数组里面
      },
// 批量删除
async deletebtn(){
    const arr1=[]
    this.shu.map(ite=>{
arr1.push(ite.uid)
    })
try {
    const {data:res}=await http.post('/user/removeBatch',arr1)
   this.$message({ type:'success',message:res.data})
} catch (err) {
    Promise.reject(err)
}
this.$router.go()
},  
//修改信息
    handleEdit(index, row) {
        this.xguser=row
        this.isxg=true
        //console.log(index, row);
      },
//删除当个数据
     async handleDelete(index, row) {
       const arr=[]
       arr.push(row.uid)
        const {data:res}=await http.post('/user/removeBatch',arr)
   this.$message({ type:'success',message:res.data})
 this.users=this.users.filter(ite=>{
       return ite.uid!==row.uid
   })
      },
//向服务器发送修改的信息
async xgbtn(){
    try {//addr:'',birthday:'',gender:'男',level:1,nickName:'',password:'',realName:'',username:''
    const {data:res}=await http.put('/user/updateUser',this.xguser)
    this.users=this.users.map(ite=>{
        if(ite.uid===this.xguser.uid){
          ite=this.xguser
        }
        return ite
    })
    this.$message({type:'success',message:res.data})
    this.xguser={addr:'',birthday:'',gender:'男',level:1,nickName:'',password:'',realName:'',username:''}
    this.isxg=false
console.log(this.xguser);
    } catch (err) {
        Promise.reject(err)
    }
}

    },
    components:{
//tanchu
    }
}
</script>

<style scoped>
.home-1{
    margin: 2px 0px 0px 5px;
}
.eltab{
    line-height: 30px !important;
}
.el-table /deep/ th {
padding: 0 ;
}
.el-table /deep/ td {
padding: 0 ;
}
.home1btn{
    float: left;
    margin-bottom: 3px;
   
}
.from{
float: left;
width: 100%;
margin-left: 5px;
line-height: 30px !important;
border: 1px solid red;
}
.from el-form-item{
    float: left;
}
</style>